iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
Modern Web

玩轉 Storybook系列 第 3

玩轉 Storybook: Day 03 專案結構

  • 分享至 

  • xImage
  •  

前情提要

從開始安裝到完成,檢查專案目錄下變更的檔案結構,會發現Storybook的安裝做了以下的步驟。

  • 安裝需要的相依套件
  • 在Package.json加上建置與執行Storybook的Script
  • 增加預設的 Storybook Config 檔案
  • 增加一些做為範例參考的樣版Story檔案

Storybook 在安裝的時候,會依據專案現有框架,提供最佳的組裝方式。接下來,我們就來分別看看在 Vue 及 Angular 的專案框架下,完成 Storybook 安裝後所產出的檔案。

Vue:檔案結構說明

安裝完 Storybook 後

安裝需要的相依套件

devDependencies 區塊,增加安裝了幾個套件

  • @storybook/vue 支援Vue開發的Storybook套件
  • @storybook/addon-xxx 預設安裝的addon,稍後的單元會介紹

加上建置與執行Storybook的Script

scripts 區塊,增加了二個指令

  • npm run build-storybook 建置 Storybook
  • npm run storybook 啟動 Storybook

增加預設的 Storybook Config 檔案

Config檔案主要放置在 .storybook 目錄下,包括

  • main.js
  • preview.js

增加一些做為範例參考的樣版Story檔案

樣版Story檔案主要放置在 src/stories目錄下

Angular:的檔案結構說明

安裝完 Storybook 後

安裝需要的相依套件

devDependencies 區塊,增加安裝了幾個套件

  • @storybook/angular 支援Angular開發的Storybook套件
  • @storybook/addon-xxx 預設安裝的addon,稍後的單元會介紹

加上建置與執行Storybook的Script

scripts 區塊,增加了二個指令

  • npm run build-storybook 建置 Storybook
  • npm run storybook 啟動 Storybook

增加預設的 Storybook Config 檔案

Config檔案主要放置在 .storybook 目錄下

為了支援TypeScript,除了main.js及preview.js,還增加了

  • tsconfig.json
  • typings.d.ts

增加一些做為範例參考的樣版Story檔案

樣版Story檔案主要放置在 src/stories 目錄下

Next

Storybook 的組態設定檔案是放在 .storybook 資料夾底下,下一個單元,就會介紹如何利用這些檔案去設定 Storybook


上一篇
玩轉 Storybook: Day 02 安裝
下一篇
玩轉 Storybook: Day 04 Configure
系列文
玩轉 Storybook30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言